<template>
  <div class="mymine" @touchstart="fnn" :class="{paused:flag}" @touchend='end'>
      <div class="myitem"
      v-for="item in list"
      :key="item.id"
      @click="$router.push('./会员页面')">
          <i><van-icon name="arrow" /></i>
          <p>{{item.username}}</p>
          <div><h2>{{item.Number}}积分</h2></div>
      </div>
  </div>
</template>

<script>
import { getVip } from '../../api/jiang/vip'
export default {
    data() {
        return {
            flag: false,
            list: [],
            result: 0
        }
    },
    created() {
        this.getVip()
    },
    methods: {
        fnn() {
            this.flag = true
        },
        end() {
            // console.log('徐茳是个憨批');
            this.flag = false
        },
        async getVip() {
            try {
                const { data } = await getVip()
                this.list = data.data.list
            } catch (err) {
                console.log(err);
            }
        }
    }
}
</script>

<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}
.mymine{
    width: 1600px;
    height: 200px;
    overflow: hidden;
    animation: move 10s linear infinite alternate;
    // background-color: blue;
}
.myitem{
    position: relative;
    margin-left:30px;
    height: 100%;
    width: 20%;
    background-color: #3B3B3B ;
    float: left;
    padding-left: 30px;
    border-radius: 20px;
}
.myitem i{
    position: absolute;
    right: 0;
    top: 37%;
}
.myitem p{
    margin: 40px 0 10px 0;
    font-size: 28px;
}
h2{
    color: #FF6800 ;
}
.mymine .myitem:nth-last-child(1){
    margin-right: 30px;
}
.paused{
    animation:paused
}
@keyframes move{
    0%{
        transform: translateX(0px);
    }
    100%{
        transform: translateX(-900px);
    }
}
</style>
